import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'
import * as service from '../../../../api/zynindex'
import * as asset from '../../../../api/ningindex'

import { PlusOutlined, CalendarOutlined } from '@ant-design/icons';
import { Button, Layout, Input, theme, Table, Space, Form, Modal, Select, notification, message, } from 'antd';
import '../Kind/Kind.scss'
const { Content } = Layout;
const { Search } = Input;
const { Option } = Select;

interface Props {

}

function Kind(props: Props) {
  const [form]=Form.useForm()
  const [modal2Open, setModal2Open] = useState(false);
  // const [modal1Open, setModal1Open] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  // 新增类别
  // const handleOk = async (e: any) => {
  //   console.log(e.target);
  //   //  var res = await asset.kind_add(values)
  //   // console.log(res);
  // };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  // 获取资产类别列表
  var asset_kind = async () => {
    var res = await asset.asset_kind();
    console.log(res);
    res.data.map((item: any) => {
      item.key = item.proid;
    })
    setTableData(res.data);
  }
  useEffect(() => {
    asset_kind();
  }, [])

  // 删除资产类别
  var delete_kind = async (id: any) => {
    var res = await asset.delete_kind({ id });
    // console.log(res);
    if (res.status == 200) {
      notification.success({ message: '删除资产类别成功!' })
    } else {
      notification.error({ message: '删除资产类别失败!' })
    }
    setTableData(res.data);
    asset_kind()
  }

  // 新增类别
  const onFinish = async (values: any) => {
   
    console.log(values);
  
    // console.log(res);
    if(values.id){
      var res=await asset.change_kind({id:values.id,lbSort:values.lbSort})
      console.log(res);
      setModal2Open(false)
      
    }else{
      var res = await asset.kind_add(values)
      setModal2Open(false)
    }
    asset_kind();
  };

  //查看编辑详情
  const edit=async (id:any)=>{
    setModal2Open(true)
    var res = await asset.detaill_kind({id})
    // console.log(res);
    form.setFieldsValue(res.data.data[0])
    
  }


  // 搜索资产类别
  var onSearch = async (value: string) => {
    var res = await service.kind_search({ kind_name_like: value })
    // console.log(res);
    setTableData(res.data);
  }
  const [messageApi, contextHolder] = message.useMessage()
  var navigate = useNavigate()
  const info = () => {
    messageApi.info('新增成功');
    // navigate(-1)
  };

  const {
    token: { colorBgContainer },
  } = theme.useToken();
  var [tableData, setTableData] = useState([])

  const columns = [
    {
      title: '类别名称',
      dataIndex: 'lbSort',
      key: 'lbSort',
      render: (_: any, record: any) => <Space> <CalendarOutlined />{record.lbSort}</Space>,
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 200,
      render: (_: any, record: any) => <Space>
        <Button type="primary" onClick={() =>{edit(record.id)}}  >编辑</Button>
        <Button type="primary" danger onClick={() => { delete_kind(record.id) }}>删除</Button>
      </Space>
    },
  ]

  return (
    <div className='kind'>
      <Content
        style={{
          padding: 24,
          margin: 0,
          minHeight: 280,
          background: colorBgContainer,
        }}
      >
        <div className="shang">
          <div className="line"> </div>
          <div className="set">资产类别</div>
        </div>
        <div className="search-btn">
          <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 300 }} />
          <div className="btn">
            <Button type="primary" onClick={() => {setModal2Open(true); form.resetFields()}}>
              <PlusOutlined /> 新增类别
            </Button>
            <Modal
              title="编辑类别"
              centered
              open={modal2Open}
              // okText="确认"
              // cancelText="取消"
              // onOk={handleOk}
              footer={null}
              onCancel={() => setModal2Open(false)}
            >
              <Form
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                //   onFinishFailed={onFinishFailed}
                form={form}
                autoComplete="off" >
                  <Form.Item name='id' hidden>
<Input></Input>
                  </Form.Item>
                <Form.Item name="lbSort" label="类别名称" rules={[{ required: true }]}>
                  <Input />
                </Form.Item>
                <Form.Item name="t" label="上级类别" >
                  <Select
                    defaultValue="请选择"
                    allowClear
                    // onChange={handleChange}
                    options={[
                      { value: "电子产品及通讯设备", label: '电子产品及通讯设备' },
                      { value: "电脑", label: '电脑' },
                      { value: "投影仪", label: '投影仪' },
                      { value: "录音设备", label: '录音设备' },
                      { value: "办公用品", label: '办公用品' },
                      { value: "笔记本", label: '笔记本' },
                      { value: "笔", label: '笔' },
                      { value: "纸张", label: '纸张' }
                    ]}
                  >
                  </Select>
                </Form.Item>
                <Form.Item>
                  <Space>
                    <Button htmlType='submit' >确认</Button>
                    <Button>取消</Button>
                  </Space>
                </Form.Item>
              </Form>
            </Modal>
            {contextHolder}
            <Button >全部删除</Button>
            {/* <Modal
              title="删除确认"
              centered
              // open={modal1Open}
              okText="确认"
              cancelText="取消"
              // onOk={() => setModal1Open(false)}
              // onCancel={() => setModal1Open(false)}
              open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
            > <p>信息删除后无法恢复,确定要删除吗?</p>
            </Modal> */}
          </div>
        </div>
        <Table columns={columns} dataSource={tableData} />
      </Content>
    </div>
  );
}

export default Kind;